<ion-header>
    <ion-toolbar>
        <ion-title>
            <h1>{{ title | translate }}</h1>
        </ion-title>
        <ion-buttons slot="end">
            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content class="addon-mod_quiz-preflight-modal">
    <core-loading [hideUntil]="loaded">
        <form [formGroup]="preflightForm" (ngSubmit)="sendData($event)" #preflightFormEl>
            <ion-list>
                <!-- Access rules. -->
                <ng-container *ngFor="let data of accessRulesData; let last = last">
                    <core-dynamic-component [component]="data.component" [data]="data.data">
                        <p class="ion-padding">Couldn't find the directive to render this access rule.</p>
                    </core-dynamic-component>
                    @if (!last) {
                        <core-spacer />
                    }
                </ng-container>

                <ion-button expand="block" type="submit" class="ion-margin">
                    {{ title | translate }}
                </ion-button>
                <!-- Remove this once Ionic fixes this bug: https://github.com/ionic-team/ionic-framework/issues/19368 -->
                <input type="submit" class="core-submit-hidden-enter" />
            </ion-list>
        </form>
    </core-loading>
</ion-content>
